<template>
  <!-- <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header">
        <span>购物车首页</span>
        <div class="header-btns">
          <el-button type="primary" >商品列表</el-button>
          <el-button type="primary" class="unselected">购物车</el-button>
        </div>
      </div>
    </template> -->
    <el-table :data="shopList" stripe style="width: 100%">
      <el-table-column prop="id" label="序号" header-align="center" align="center" />
      <el-table-column prop="title" label="名称" header-align="center" align="center" />
      <el-table-column prop="price" label="价格"  header-align="center" align="center" />
      <el-table-column prop="count" label="数量" header-align="center" align="center" />
    </el-table>
    <div v-if="shopList.length">
      <div class="total-price">商品总价值为: {{ totalPrice }}</div>
      <el-button type="primary" @click="buyProduct">解算商品</el-button>
    </div>
  <!-- </el-card> -->
</template>

<script lang="ts" setup>

import { useShoppingCarStore } from '../stores/shopcart'
import { storeToRefs } from 'pinia'

const { shopList, totalPrice } =storeToRefs(useShoppingCarStore())
const { buyProduct } = useShoppingCarStore()

</script>


<style lang="scss" scoped>
.el-table {
  width: 100%;
  .el-table-column {
    width: 20%;
  }
}
.total-price {
  font-size: 1.3em;
  font-weight: bold;
  margin:5px 0;
}
</style>
